<template>
  <el-dialog
    :visible.sync="dialogVisible"
    :modal="false"
    :before-close="closeDialog"
    :show-close="false"
    class="my-info-dialog"
    customClass="customWidth"
    @open="open()" top="10px">
    <dv-border-box-3 style="width: 1785px;height: 945px;margin-left: -23px;margin-top: -33px">
      <dv-border-box-8 style="width: 1785px;height: 945px;margin-left: -23px;margin-top: -33px">
        <br>
        <div class="sub_titleBar">
          <dv-decoration-4 :reverse="true"
                           style="float: left;width:590px;height:15px;margin-top: 43px;margin-left: 50px;"/>
          <dv-decoration-1 style="position: absolute;left: 11%;width:600px;height:50px;"/>
          <div class="sub_title">工伤快办</div>
          <dv-decoration-1
            style="position: absolute;right: 9%;width:600px;height:50px;transform: rotateY(180deg);transition:0.5s;"/>
          <dv-decoration-4 :reverse="true"
                           style="float: right;width:590px;height:25px;margin-top: 43px;margin-right: 50px;transform: rotateY(180deg);transition:0.5s;"/>
        </div>
        <main>
          <div class="left">
            <!--  表：各行业工伤基金收支TOP10  -->
            <div class="data3_table">
              <div class="table_title height_left3">各行业工伤基金支出占比TOP10</div>
              <div style="width:55%;height:90%;float: left">
                <div id="id_fund" style="width:100%;height:100%;"/>
              </div>
              <div style="float: left;width:35%;margin-right: 5%;color: #fff;margin-top: 6%;">
                <div v-for="(item,index) in data_pie" :key="index">
                  <div style="display: inline-block;float: left;width: 15px;height: 6px;margin-top: 3%"
                       :style="'backgroundColor:' + item.color"></div>
                  <div style="display: inline-block;float: left;font-size: 0.8rem;margin-left: 2%">{{ item.industry }}
                  </div>
                  <div style="display: inline-block;float: right">{{ item.proportion }}%</div>
                  <br>
                </div>
              </div>
            </div>
            <!--  表：工伤基金收支差额(近6个月)  -->
            <div class="box_left2">
              <div class="table_title height_right2">工伤基金收支差额(近6个月)(金额单位：百万元)</div>
              <div id="id_fundPure2" style="width: 110%;height: 70%;"/>
            </div>
          </div>
          <div class="mid">
            <!--     支付能力排行       -->
            <div class="right_data3">
              <div class="table_title height_right2">支付能力排行</div>
              <div id="id_abilityPay" style="width: 100%;height: 100%"/>
            </div>
            <!--  表：工伤收支情况(近5年)  -->
            <div class="insured">
              <div class="table_title height_left3">工伤收支情况(近5年)(金额单位：千万元)</div>
              <div id="id_pureYear" style="width: 100%;height: 80%"/>
            </div>
          </div>
          <div class="right">
            <!--  表：工伤医疗费用支出  -->
            <div class="right_data2">
              <div class="table_title height_left3">工伤医疗费用支出</div>
              <div class="data3_table_top">
                <div class="data3_table_top_img"/>
                <div class="data3_table_top_text">费用总支出</div>
                <div class="data1_text4" style="width: 120px;color: #FBD533;font-size: 28px">{{costTotal}}</div>
                <span class="data1_text3">万元</span>
              </div>
              <dv-scroll-board :config="config_data2" class="data2_table"/>
            </div>
            <!--  表：浙里办应用使用量  -->
            <div class="right_data1">
              <div class="table_title height_right2">浙里办应用使用量</div>
              <div id="id_zlb" ref="table_left3" style="height: 82%;"></div>
            </div>
          </div>
          <div class="bottom">
            <div class="data_mid_2">
              <div class="data2_title">工伤联网结算</div>
              <dv-scroll-board :config="config_data3" class="data_table"/>
            </div>
            <div class="water">
              <dv-decoration-9
                style="float: left;width:220px;height:220px;margin-left: 10%;color: #ffffff;font-size: 20px;">案件数：220个
              </dv-decoration-9>
              <dv-decoration-9
                style="float: left;width:220px;height:220px;margin-left: 10%;color: #ffffff;font-size: 20px">事故率：5%
              </dv-decoration-9>
            </div>
          </div>
        </main>
      </dv-border-box-8>
    </dv-border-box-3>
  </el-dialog>
</template>

<script>
import echarts from "echarts";
import Highcharts from "highcharts";
import axios from "_axios@0.25.0@axios";
import api from "@/api/gs";
import {round} from "_echarts@4.9.0@echarts/src/util/number";

export default {
  name: "subscreen_fund",
  props: {
    dialogVisible: Boolean
  },
  data() {
    return {
      costTotal:0,
      config: {
        number: [100],
        content: '{nt}',
        style: {
          fontSize: 28,
          fill: '#FDD532',
        },
      },
      config_data2: {},
      config_data3: {
        header: ['姓名 ', '身份证', '统筹区', '医院', '时间', '金额'],
        data: [],
        index: true,
        indexHeader: '序号',
        columnWidth: [80, 100, 250, 100, 250, 200, 150],
        rowNum: 5,
        align: ['center'],
        headerBGC: '#1A293C',
        oddRowBGC: '#023358',
        evenRowBGC: '#041F3A'
      },
      gssz: {
        xData: [],
        income: [],
        expenditure: [],
        balance: []
      },
      data_pie: [
        {
          color: '#DD001B',
          industry: '建筑业',
          proportion: 15
        },
        {
          color: '#FD6431',
          industry: '保险业',
          proportion: 10
        },
        {
          color: '#F48C90',
          industry: '房地产',
          proportion: 15
        },
        {
          color: '#71C9FD',
          industry: '计算机',
          proportion: 13
        },
        {
          color: '#50A1F7',
          industry: '服装业',
          proportion: 10
        },
        {
          color: '#A16D08',
          industry: '公益组织',
          proportion: 9
        },
        {
          color: '#D6EBAA',
          industry: '广告业',
          proportion: 7
        },
        {
          color: '#29AB91',
          industry: '航空航天',
          proportion: 5
        },
        {
          color: '#D6E0F2',
          industry: '金融业',
          proportion: 4
        },
        {
          color: '#FEEDE8',
          industry: '因特网',
          proportion: 3
        },
      ],
      config_pie: {
        radius: '60%',
        activeRadius: '70%',
        color: ['#DD001B', '#FD6431', '#F48C90', '#71C9FD', '#50A1F7', '#A16D08', '#D6EBAA', '#29AB91', '#D6E0F2', '#FEEDE8'],
        data: [
          {
            name: '建筑业',
            value: 15,
          },
          {
            name: '保险业',
            value: 10
          },
          {
            name: '房地产',
            value: 15
          },
          {
            name: '计算机',
            value: 13
          },
          {
            name: '服装业',
            value: 10
          },
          {
            name: '公益组织',
            value: 9
          },
          {
            name: '广告业',
            value: 7
          },
          {
            name: '航空航天',
            value: 5
          },
          {
            name: '金融业',
            value: 4
          },
          {
            name: '因特网',
            value: 3
          },
        ],
        lineWidth: 24,
        digitalFlopStyle: {
          fontSize: 20
        },
        showOriginValue: false
      },
      myChart: null,
      // 统筹区编码
      areaCode: '330799',
      // 数据年份
      year: '2021',
      // 当前月的上月往前推6个月的月份
      firstMonth: '',
      // 当前月的上月
      lastMonth: '',
      accidentRate: 0,
      cases: 0,
    }
  },
  mounted() {
    this.init();
    this.initMonth();
  },
  methods: {
    // 月份初始化
    initMonth() {
      const date = new Date();
      let year = date.getFullYear();
      const lastMonthTemp = date.getMonth();
      this.lastMonth = year + ('' + lastMonthTemp).padStart(2, '0');
      let firstMonthTemp = lastMonthTemp - 5;
      if (firstMonthTemp <= 0) {
        year -= 1;
        this.firstMonth = '' + year + ('' + (12 + parseInt(firstMonthTemp))).padStart(2, '0');
      }
    },
    // 子屏-初始化图表数据--基金支出行业Top10
    getFundRankIndustry_sub() {
      const url = api.getFundRankIndustry;
      if (url) {
        let param = {};
        param.areaCode = this.areaCode;
        param.startYear = this.firstMonth;
        param.endYear = this.lastMonth;
        param.typeFlag = '1';
        axios.post(url, param).then(res => {
          if (res.data.code) {
            console.log('子屏-初始化图表数据--基金支出行业Top10--错误!');
            console.log(res.data);
          }
          this.initFundRankIndustry_sub(res.data.result);
        }).catch(err => {
        });
      } else {
        this.initFundRankIndustry_sub();
      }
    },
    // 基金收支行业Top10（饼图）
    initFundRankIndustry_sub(result) {
      let data1, data2;
      if (result) {
        data1 = [];
        data2 = [
          {
            color: '#FF4343',
            industry: '',
            proportion: 0
          },
          {
            color: '#F69846',
            industry: '',
            proportion: 0
          },
          {
            color: '#F6D54A',
            industry: '',
            proportion: 0
          },
          {
            color: '#86D560',
            industry: '',
            proportion: 0
          },
          {
            color: '#45DBF7',
            industry: '',
            proportion: 0
          },
          {
            color: '#4AC0FF',
            industry: '',
            proportion: 0
          },
          {
            color: '#4E82FF',
            industry: ' ',
            proportion: 0
          },
          {
            color: '#584BFF',
            industry: '',
            proportion: 0
          },
          {
            color: '#BE4DFF',
            industry: '',
            proportion: 0
          },
          {
            color: '#FF4BFF',
            industry: '',
            proportion: 0
          },
        ];
        for (let index in result) {
          data1.push({
            name: result[index].industry,
            value: Number(Math.round(result[index].fundPropor * 10000)) / 100
          })
          data2[index].industry = result[index].industry;
          data2[index].proportion = Number(round(result[index].fundPropor * 10000)) / 100;
        }
      }
      const data1Demo = [
        {
          name: '金属制品业',
          value: 31,
        },
        {
          name: '其他制造业',
          value: 8
        },
        {
          name: '橡胶和塑料制品业',
          value: 5
        },
        {
          name: '商务服务业',
          value: 4
        },
        {
          name: '批发业',
          value: 4
        },
        {
          name: '零售业',
          value: 4
        },
        {
          name: '建筑装饰和其他建筑业',
          value: 3
        },
        {
          name: '通用设备制造业',
          value: 3
        },
        {
          name: '科技推广和应用服务业',
          value: 2
        },
        {
          name: '研究和试验发展',
          value: 2
        },
      ];
      const data2Demo = [
        {
          color: '#DD001B',
          industry: '金属制品业',
          proportion: 31
        },
        {
          color: '#FD6431',
          industry: '其他制造业',
          proportion: 8
        },
        {
          color: '#F48C90',
          industry: '橡胶和塑料制品业',
          proportion: 5
        },
        {
          color: '#71C9FD',
          industry: '商务服务业',
          proportion: 4
        },
        {
          color: '#50A1F7',
          industry: '批发业',
          proportion: 4
        },
        {
          color: '#A16D08',
          industry: '零售业',
          proportion: 4
        },
        {
          color: '#D6EBAA',
          industry: '建筑装饰和其他建筑业 ',
          proportion: 3
        },
        {
          color: '#29AB91',
          industry: '通用设备制造业',
          proportion: 3
        },
        {
          color: '#D6E0F2',
          industry: '科技推广和应用服务业',
          proportion: 2
        },
        {
          color: '#FEEDE8',
          industry: '研究和试验发展',
          proportion: 2
        },
      ];
      data1 = data1 || data1Demo;
      this.data_pie = data2 || data2Demo;
      if (this.myChart) {
        this.myChart.dispose();
      }
      this.myChart = echarts.init(document.getElementById("id_fund"));
      let myChart = this.myChart;
      const option = {
        tooltip: {
          trigger: "item",
          formatter: "{a}<br>{b}: {c}%",
        },
        color: ["#FF4343", "#F69846", "#F6D54A", "#86D560", "#45DBF7", "#4AC0FF", "#4E82FF", "#584BFF", "#BE4DFF", "#FF4BFF", "#86D560"],
        series: [
          {
            name: "事故率",
            type: "pie",
            radius: ["50%", "75%"],
            avoidLabelOverlap: false,
            label: {
              normal: {
                show: false,
                position: "center",
              },
              emphasis: {
                show: true,
                textStyle: {
                  fontSize: "15",
                  fontWeight: "bold",
                },
              },
            },
            labelLine: {
              normal: {
                show: false,
              },
            },
            data: data1,
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };
      // 饼图轮播部分--start
      let count = 0;
      let timeTicket = null;
      let dataLength = option.series[0].data.length;
      timeTicket && clearInterval(timeTicket);
      timeTicket = setInterval(function () {
        myChart.dispatchAction({
          type: "downplay",
          seriesIndex: 0,
        });
        myChart.dispatchAction({
          type: "highlight",
          seriesIndex: 0,
          dataIndex: count % dataLength,
        });
        myChart.dispatchAction({
          type: "showTip",
          seriesIndex: 0,
          dataIndex: count % dataLength,
        });
        count++;
      }, 2400);

      myChart.on("mouseover", function (params) {
        clearInterval(timeTicket);
        myChart.dispatchAction({
          type: "downplay",
          seriesIndex: 0,
        });
        myChart.dispatchAction({
          type: "highlight",
          seriesIndex: 0,
          dataIndex: params.dataIndex,
        });
        myChart.dispatchAction({
          type: "showTip",
          seriesIndex: 0,
          dataIndex: params.dataIndex,
        });
      });
      myChart.on("mouseout", function (params) {
        timeTicket && clearInterval(timeTicket);
        timeTicket = setInterval(function () {
          myChart.dispatchAction({
            type: "downplay",
            seriesIndex: 0,
          });
          myChart.dispatchAction({
            type: "highlight",
            seriesIndex: 0,
            dataIndex: count % dataLength,
          });
          myChart.dispatchAction({
            type: "showTip",
            seriesIndex: 0,
            dataIndex: count % dataLength,
          });
          count++;
        }, 2400);
      });
      // 饼图轮播部分--end
      option && myChart.setOption(option);
    },
    // 子屏-初始化图表数据--支付能力排行
    getFundRankRegion_sub() {
      const url = api.getFundRankRegion;
      if (url) {
        let param = {};
        param.areaCode = '330700'
        param.year = this.year;
        axios.post(url, param).then(res => {
          if (res.data.code) {
            console.log('子屏-初始化图表数据--支付能力排行--错误!');
            console.log(res.data);
          }
          this.initFundRankRegion_sub(res.data.result);
        }).catch(err => {
        });
      } else {
        this.initFundRankRegion_sub();
      }
    },
    // 支付能力排行
    initFundRankRegion_sub(result) {
      let xData, yData;
      if (result) {
        xData = [];
        yData = [];
        for (const item of result) {
          xData[xData.length] = item.areaCode;
          yData[yData.length] = parseFloat(item.payMonthPredict).toFixed(1);
        }
      }

      const xDataDemo = ["金华市", "兰溪市", "义乌市", "东阳市", "永康市", "武义县", "浦江县", "磐安县"];
      const yDataDemo = [10, 8, 7, 6, 5, 4.5, 4, 3];

      xData = xData || xDataDemo;
      yData = yData || yDataDemo;

      let yDataStr = [];
      for (const item of yData) {
        yDataStr[yDataStr.length] = item + '个月';
      }

      const myChart = echarts.init(document.getElementById("id_abilityPay"))
      const salvProMax = [];//背景按最大值
      for (let i = 0; i < yData.length; i++) {
        salvProMax.push(yData[0])
      }
      // 悬浮窗轮播
      // myChart.dispatchAction({
      //   type: 'showTip',
      //   seriesIndex: 0,
      //   dataIndex: 0
      // });
      // let idx = 0;
      // setInterval(() => {
      //   myChart.dispatchAction({
      //     type: 'showTip',
      //     seriesIndex: 0,
      //     dataIndex: idx
      //   });
      //   idx++;
      //   if (idx >= 8) {
      //     idx = 0;
      //   }
      // }, 2400);
      const posList = [
        'left',
        'right',
        'top',
        'bottom',
        'inside',
        'insideTop',
        'insideLeft',
        'insideRight',
        'insideBottom',
        'insideTopLeft',
        'insideTopRight',
        'insideBottomLeft',
        'insideBottomRight'
      ]
      let app = {}
      app.configParameters = {
        rotate: {
          min: -90,
          max: 90
        },
        align: {
          options: {
            left: 'left',
            center: 'center',
            right: 'right'
          }
        },
        verticalAlign: {
          options: {
            top: 'top',
            middle: 'middle',
            bottom: 'bottom'
          }
        },
        position: {
          options: posList.reduce(function (map, pos) {
            map[pos] = pos;
            return map;
          }, {})
        },
        distance: {
          min: 0,
          max: 100
        }
      };
      app.config = {
        rotate: 90,
        align: 'left',
        verticalAlign: 'middle',
        position: 'insideBottom',
        distance: 15,
        onChange: function () {
          const labelOption = {
            rotate: app.config.rotate,
            align: app.config.align,
            verticalAlign: app.config.verticalAlign,
            position: app.config.position,
            distance: app.config.distance
          };
          myChart.setOption({
            series: [
              {
                label: labelOption
              },
              {
                label: labelOption
              },
              {
                label: labelOption
              },
              {
                label: labelOption
              }
            ]
          });
        }
      };
      const labelOption = {
        show: false,
        position: app.config.position,
        distance: app.config.distance,
        align: app.config.align,
        verticalAlign: app.config.verticalAlign,
        rotate: app.config.rotate,
      };
      const option = {
        // 图表在容器内的位置
        grid: {
          top: '20%',
          right: '0%',
          bottom: '25%',
          left: '5%'
        },
        // 悬浮提示框
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        // X轴
        xAxis: [{
          type: 'category',
          data: xData,
          axisLabel: {  // 标签
            textStyle: {
              color: '#8c8c92',
            },
            interval: 0, //坐标刻度之间的显示间隔，默认就可以了（默认是不重叠）
            rotate: 0   //调整数值改变倾斜的幅度（范围-90到90）
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: '#014C7D'
            }
          },
        }],
        yAxis: [
          {
            type: 'value',
            name: "个月",
            min: -6,
            max: 6,
            interval: 2,
            nameTextStyle: {
              color: '#8c8c92',
              fontSize: 11,
              nameLocation: "start",
            },
            axisLabel: {  // 标签
              textStyle: {
                color: '#8c8c92',
              }
            },
            axisLine: {
              lineStyle: {
                color: '#014C7D'
              }
            },
            // 切割线
            splitLine: {
              show: true,
              lineStyle: {
                color: '#014C7D'
              }
            },
          }
        ],
        series: [
          {
            type: "bar",
            barMaxWidth: 25,
            data: yData.map((item) => {
              // 循环
              return {
                value: item,
                label: {
                  show: true, //开启显示
                  position: item > 0 ? "top" : "bottom", //判断正负值上方显示还是下方
                  formatter: "{c}月",
                  textStyle: {
                    //数值样式
                    color: item < 0 ? "#7CC479" : "#E93030",   //数值颜色
                    fontSize: "18px",
                  },
                },
              };
            }),
            itemStyle: {//柱体背景色
              normal: {
                color: (val) => {
                  var index_color = val.value;
                  return index_color > 0 ? "#E93030" : "#7CC479";
                },
              },
            },
          },

        ]
      }
      option && myChart.setOption(option);
    },
    // 子屏-初始化图表数据--基金收支差额(近6个月)
    getFundM_sub() {
      const url = api.getFund;
      if (url) {
        let param = {};
        param.areaCode = this.areaCode;
        param.typeFlag = 'M';
        param.startYear = this.firstMonth;
        param.endYear = this.lastMonth;
        axios.post(url, param).then(res => {
          if (res.data.code) {
            console.log('子屏-初始化图表数据--基金收支情况(近6个月)--错误!');
            console.log(res.data);
          }
          this.initFundM_sub(res.data.result);
        }).catch(err => {
        });
      } else {
        this.initFundM_sub();
      }
    },
    // 基金收支差额(近6个月)
    initFundM_sub(result) {
      let xData, yData1, yData2;
      if (result) {
        xData = [];
        yData1 = [];
        yData2 = [];
        for (const item of result) {
          let fundIn = (item.income / 1000000).toFixed(2); // 单位转为百万元，小数点后保留2位(四舍五入)
          let fundOut = (item.outcome / 1000000).toFixed(2); // 单位转为百万元，小数点后保留2位(四舍五入)
          xData[xData.length] = item.aae001;
          yData1[yData1.length] = fundIn;
          yData2[yData2.length] = fundOut;
        }
      }

      const demoXData = ['2月', '3月', '4月', '5月', '6月', '7月'];
      const demoYData1 = [20, 32, 55, 60, 43, 25];
      const demoYData2 = [15, 25, 50, 57, 36, 18];
      xData = xData || demoXData;
      yData1 = yData1 || demoYData1;
      yData2 = yData2 || demoYData2;


      const myChart = echarts.init(document.getElementById("id_fundPure2"));
      // 悬浮窗轮播
      // myChart.dispatchAction({
      //   type: 'showTip',
      //   seriesIndex: 0,
      //   dataIndex: 0
      // });
      // let idx = 0;
      // setInterval(() => {
      //   myChart.dispatchAction({
      //     type: 'showTip',
      //     seriesIndex: 0,
      //     dataIndex: idx
      //   });
      //   idx++;
      //   if (idx >= 6) {
      //     idx = 0;
      //   }
      // }, 2400);
      const option = {
        grid: {
          top: '30%',
          right: '10%',
          bottom: '9%',
          left: '13%'
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          top: '7%',
          right: '10%',
          textStyle: {
            color: '#fff'
          },
          data: ['基金收入', '基金支出']
        },
        xAxis: [
          {
            type: 'category',
            axisLabel: {  // 标签
              textStyle: {
                color: '#8c8c92',
              }
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#014C7D'
              }
            },
            data: xData
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '百万元',
            min: 0,
            max: 50,
            interval: 10,
            nameTextStyle: {
              color: '#8c8c92',
              fontSize: 11,
              nameLocation: "start",
            },
            axisLabel: {  // 标签
              textStyle: {
                color: '#8c8c92',
                formatter: '{value} '
              }
            },
            axisLine: {
              lineStyle: {
                color: '#014C7D'
              }
            },
            // 切割线
            splitLine: {
              show: true,
              lineStyle: {
                color: '#014C7D'
              }
            },
          }
        ],
        series: [
          {
            name: '基金收入',
            type: 'bar',
            barWidth: 10,
            itemStyle: {
              normal: {
                label: {
                  show: true, //开启显示
                  position: 'top', //在上方显示
                  textStyle: { //数值样式
                    color: 'white',
                  }
                },
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: '#00F2F8'
                }, {
                  offset: 1,
                  color: '#04253B'
                }]),
              }
            },
            data: yData1
          },
          {
            name: '基金支出',
            type: 'line',
            itemStyle: {  /*设置折线颜色*/
              normal: {
                color: '#EA772B'
              }
            },
            data: yData2
          }
        ]
      };
      option && myChart.setOption(option);
    },
    // 子屏-初始化图表数据--基金收支差额(近5年)
    getFundY_sub() {
      const url = api.getFund;
      if (url) {
        let param = {};
        param.areaCode = this.areaCode;
        param.typeFlag = 'Y';
        axios.post(url, param).then(res => {
          if (res.data.code) {
            console.log('子屏-初始化图表数据--基金收支情况(近5年)--错误!');
            console.log(res.data);
          }
          this.initFundY_sub(res.data.result);
        }).catch(err => {
        });
      } else {
        this.initFundY_sub();
      }
    },
    // 基金收支差额(近5年)
    initFundY_sub(result) {
      let xData, yData1, yData2, yData3;
      if (result) {
        xData = new Array(5);
        yData1 = new Array(5);
        yData2 = new Array(5);
        yData3 = new Array(5);
        for (let index in result) {
          let i = Math.abs(index - (result.length - 1)); // 倒序读取数据的下标
          let j = Math.abs(index - 4);  // 倒序存储数据的下标
          if (index < 5) {
            let income = (result[i].income / 10000000).toFixed(2); // 单位转为千万元，小数点后保留2位(四舍五入)
            let outcome = (result[i].outcome / 10000000).toFixed(2); // 单位转为千万元，小数点后保留2位(四舍五入)
            let balance = (result[i].balance / 10000000).toFixed(2); // 单位转为千万元，小数点后保留2位(四舍五入)
            xData[j] = result[i].aae001;
            yData1[j] = income;
            yData2[j] = outcome;
            yData3[j] = balance;
          }
        }
      }

      const demoXData = ['2017', '2018', '2019', '2020', '2021'];
      const demoYData1 = [35, 30, 42, 48, 32];
      const demoYData2 = [29, 33, 35, 39, 26];
      const demoYData3 = [20, 12, 15, 25, 17];
      xData = xData || demoXData;
      yData1 = yData1 || demoYData1;
      yData2 = yData2 || demoYData2;
      yData3 = yData3 || demoYData3;

      const myChart = echarts.init(document.getElementById("id_pureYear"))
      const posList = [
        'left',
        'right',
        'top',
        'bottom',
        'inside',
        'insideTop',
        'insideLeft',
        'insideRight',
        'insideBottom',
        'insideTopLeft',
        'insideTopRight',
        'insideBottomLeft',
        'insideBottomRight'
      ]
      const option = {
        // 图表在容器内的位置
        grid: {
          top: '25%',
          right: '0%',
          bottom: '20%',
          left: '13%'
        },
        // 图例
        legend: {
          top: '7%',
          right: '0%',
          textStyle: {
            color: '#fff'
          },
          data: ['基金收入', '基金支出', '基金结余'],
        },
        // 悬浮提示框
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        // X轴
        xAxis: [{
          type: 'category',
          data: xData,
          axisLabel: {  // 标签
            textStyle: {
              color: '#8c8c92',
            },
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: '#014C7D'
            }
          },
        }],
        yAxis: [
          {
            type: 'value',
            name: "千万元",
            min: -5,
            max: 25,
            interval: 5,
            nameTextStyle: {
              color: '#8c8c92',
              fontSize: 11,
              nameLocation: "start",
            },
            axisLabel: {  // 标签
              textStyle: {
                color: '#8c8c92',
              }
            },
            axisLine: {
              lineStyle: {
                color: '#014C7D'
              }
            },
            // 切割线
            splitLine: {
              show: true,
              lineStyle: {
                color: '#014C7D'
              }
            },
          }
        ],
        series: [
          {
            name: '基金收入',
            type: 'bar',
            label: labelOption,
            emphasis: {
              focus: 'series'
            },
            barWidth: 9,
            data: yData1,
            itemStyle: {
              normal: {
                opacity: 1,
                color: '#3E9DF3'
              }
            },
          },
          {
            name: '基金支出',
            type: 'bar',
            barGap: 0,
            label: labelOption,
            emphasis: {
              focus: 'series'
            },
            data: yData2,
            barWidth: 9,
            itemStyle: {
              normal: {
                opacity: 1,
                color: '#E5772D'
              }
            },
          },
          {
            name: '基金结余',
            type: 'line',
            itemStyle: {  /*设置折线颜色*/
              normal: {
                color: '#46D3CB'
              }
            },
            data: yData3
          }
        ]
      }
      let app = {}
      app.configParameters = {
        rotate: {
          min: -90,
          max: 90
        },
        align: {
          options: {
            left: 'left',
            center: 'center',
            right: 'right'
          }
        },
        verticalAlign: {
          options: {
            top: 'top',
            middle: 'middle',
            bottom: 'bottom'
          }
        },
        position: {
          options: posList.reduce(function (map, pos) {
            map[pos] = pos;
            return map;
          }, {})
        },
        distance: {
          min: 0,
          max: 100
        }
      };
      app.config = {
        rotate: 90,
        align: 'left',
        verticalAlign: 'middle',
        position: 'insideBottom',
        distance: 15,
        onChange: function () {
          const labelOption = {
            rotate: app.config.rotate,
            align: app.config.align,
            verticalAlign: app.config.verticalAlign,
            position: app.config.position,
            distance: app.config.distance
          };
          myChart.setOption({
            series: [
              {
                label: labelOption
              },
              {
                label: labelOption
              },
              {
                label: labelOption
              },
              {
                label: labelOption
              }
            ]
          });
        }
      };
      const labelOption = {
        show: false,
        position: app.config.position,
        distance: app.config.distance,
        align: app.config.align,
        verticalAlign: app.config.verticalAlign,
        rotate: app.config.rotate,
      };
      option && myChart.setOption(option);
    },
    // 子屏-初始化图表数据--工伤医疗费用支出
    getFundMedical_sub() {
      let param = {};
      param.areaCode = this.areaCode;
      param.startYear = this.firstMonth;
      param.endYear = this.lastMonth;
      axios.post(api.getFundMedical, param).then(res => {
        if (res.data.code) {
          console.log('子屏-初始化图表数据--工伤医疗费用支出--错误!');
          console.log(res.data);
        }
        this.initFundMedical_sub(res.data.result);
      }).catch(err => {
      });
    },
    // 工伤医疗费用支出
    initFundMedical_sub(result) {
      let config;
      let configDemo = [
        ['行1列2', '行1列3', '行1列1'],
        ['行1列2', '行1列3', '行1列1'],
        ['行1列2', '行1列3', '行1列1'],
        ['行1列2', '行1列3', '行1列1'],
        ['行1列2', '行1列3', '行1列1'],
        ['行1列2', '行1列3', '行1列1']
      ];
      if (result) {
        config = [];
        for (let index in result) {
          switch (result[index].feeRate) {
            case 'costA':
              result[index].feeRate = '<2000';
              break;
            case 'costB':
              result[index].feeRate = '>=2000且<5000';
              break;
            case 'costC':
              result[index].feeRate = '>=5000且<10000';
              break;
            case 'costD':
              result[index].feeRate = '>=10000';
          }
        }
        let costTotalTemp = 0;
        for (const item of result) {
          config[config.length] = [
            item.feeRate,
            item.costNum,
            (item.fee / 10000).toFixed(2) + '万元'
          ]
          costTotalTemp += Number(item.fee);
        }
        this.costTotal = (costTotalTemp / 10000).toFixed(2);
      }
      let tempConfig = {
        header: ['费用区间', '笔数', '金额'],
        data: [],
        index: true,
        indexHeader: '序号',
        columnWidth: [80, 150, 150, 200],
        rowNum: 5,
        align: ['center'],
        headerBGC: '#1A293C',
        oddRowBGC: '#023358',
        evenRowBGC: '#041F3A'
      };
      tempConfig.data = config || configDemo;
      this.config_data2 = {...tempConfig};
      console.log(this.config_data2)
    },
    // 子屏-初始化图表数据--浙里办使用量
    getUsageZLB_sub() {
      let param = {};
      param.startYear = this.firstMonth;
      param.endYear = this.lastMonth;
      axios.post(api.getUsageZLB, param).then(res => {
        if (res.data.code) {
          console.log('子屏-初始化图表数据--浙里办使用量--错误!');
          console.log(res.data);
        }
        this.initUsageZLB_sub(res.data.result);
      }).catch(err => {
      });
    },
    // 浙里办使用量
    initUsageZLB_sub(result) {
      console.log("_____initUsageZLB_sub_______")
      console.log(result);
      let xData,yData1,yData2;
      const xDataDemo = ['金华市', '兰溪市', '义乌市', '东阳市', '永康市', '武义市', '浦江市', '磐安市'];
      const yDataDemo1 = [31, 26, 27, 41, 32, 28, 25, 29];
      const yDataDemo2 = [26, 23, 29, 39, 30, 27, 23, 26];

      if(result) {
        xData = [];
        yData1 = [];
        yData2 = [];
        for (const item of result) {
          xData[xData.length] = item.areaCode;
          yData1[yData1.length] = item.freqCompany;
          yData2[yData2.length] = item.freqPersonal;
        }
      }
      xData = xData || xDataDemo;
      yData1 = yData1 || yDataDemo1;
      yData2 = yData2 || yDataDemo2;


      const myChart = echarts.init(document.getElementById("id_zlb"))
      const posList = [
        'left',
        'right',
        'top',
        'bottom',
        'inside',
        'insideTop',
        'insideLeft',
        'insideRight',
        'insideBottom',
        'insideTopLeft',
        'insideTopRight',
        'insideBottomLeft',
        'insideBottomRight'
      ]
      let app = {}
      app.configParameters = {
        rotate: {
          min: -90,
          max: 90
        },
        align: {
          options: {
            left: 'left',
            center: 'center',
            right: 'right'
          }
        },
        verticalAlign: {
          options: {
            top: 'top',
            middle: 'middle',
            bottom: 'bottom'
          }
        },
        position: {
          options: posList.reduce(function (map, pos) {
            map[pos] = pos;
            return map;
          }, {})
        },
        distance: {
          min: 0,
          max: 100
        }
      };
      app.config = {
        rotate: 90,
        align: 'left',
        verticalAlign: 'middle',
        position: 'insideBottom',
        distance: 15,
        onChange: function () {
          const labelOption = {
            rotate: app.config.rotate,
            align: app.config.align,
            verticalAlign: app.config.verticalAlign,
            position: app.config.position,
            distance: app.config.distance
          };
          myChart.setOption({
            series: [
              {
                label: labelOption
              },
              {
                label: labelOption
              },
              {
                label: labelOption
              },
              {
                label: labelOption
              }
            ]
          });
        }
      };
      const labelOption = {
        show: false,
        position: app.config.position,
        distance: app.config.distance,
        align: app.config.align,
        verticalAlign: app.config.verticalAlign,
        rotate: app.config.rotate,
      };
      const option = {
        // 图表在容器内的位置
        grid: {
          top: '20%',
          right: '0%',
          bottom: '25%',
          left: '13%'
        },
        // 图例
        legend: {
          top: '0%',
          textStyle: {
            color: '#fff'
          },
          data: ['单位', '个人'],
        },
        // 悬浮提示框
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        // X轴
        xAxis: [{
          type: 'category',
          data: xData,
          axisLabel: {  // 标签
            textStyle: {
              color: '#8c8c92',
            },
            interval: 0, //坐标刻度之间的显示间隔，默认就可以了（默认是不重叠）
            rotate: 60   //调整数值改变倾斜的幅度（范围-90到90）
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: '#014C7D'
            }
          },
        }],
        yAxis: [
          {
            type: 'value',
            name: "次",
            min: 0,
            max: 50,
            interval: 10,
            nameTextStyle: {
              color: '#8c8c92',
              fontSize: 11,
              nameLocation: "start",
            },
            axisLabel: {  // 标签
              textStyle: {
                color: '#8c8c92',
              }
            },
            axisLine: {
              lineStyle: {
                color: '#014C7D'
              }
            },
            // 切割线
            splitLine: {
              show: true,
              lineStyle: {
                color: '#014C7D'
              }
            },
          }
        ],
        series: [
          {
            name: '单位',
            type: 'bar',
            label: labelOption,
            emphasis: {
              focus: 'series'
            },
            barWidth: 7,
            data: yData1,
            itemStyle: {
              normal: {
                opacity: 1,
                barBorderRadius: [20, 20, 0, 0],
                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                  offset: 0,
                  color: "#08244C" // 0% 处的颜色
                }, {
                  offset: 1,
                  color: "#2A76F2" // 100% 处的颜色
                }], false),
              }
            },
          },
          {
            name: '个人',
            type: 'bar',
            barGap: 0,
            label: labelOption,
            emphasis: {
              focus: 'series'
            },
            data: yData2,
            barWidth: 7,
            itemStyle: {
              normal: {
                opacity: 1,
                barBorderRadius: [20, 20, 0, 0],
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: '#54FFFF'
                }, {
                  offset: 1,
                  color: '#06152A'
                }]),
              }
            },
          }
        ]
      }
      option && myChart.setOption(option);
    },
    // 子屏-初始化图表数据--工伤联网结算
    getFundSettlement_sub() {
      let param = {};
      axios.post(api.getFundSettlement, param).then(res => {
        if (res.data.code) {
          console.log('子屏-初始化图表数据--工伤联网结算--错误!');
          console.log(res.data);
        }
        this.initFundSettlement_sub(res.data.result);
      }).catch(err => {
      });
    },
    // 工伤联网结算
    initFundSettlement_sub(result) {
      console.log("________工伤联网结算___________");
      console.log(result)
      let config = {...this.config_data3};
      let configData;
      let configDemo = [
        ['行1列2', '行1列3', '行1列1', '行1列2', '行1列3', '行1列1'],
        ['行1列2', '行1列3', '行1列1', '行1列2', '行1列3', '行1列1'],
        ['行1列2', '行1列3', '行1列1', '行1列2', '行1列3', '行1列1'],
        ['行1列2', '行1列3', '行1列1', '行1列2', '行1列3', '行1列1'],
        ['行1列2', '行1列3', '行1列1', '行1列2', '行1列3', '行1列1'],
        ['行1列2', '行1列3', '行1列1', '行1列2', '行1列3', '行1列1'],
        ['行1列2', '行1列3', '行1列1', '行1列2', '行1列3', '行1列1'],
        ['行1列2', '行1列3', '行1列1', '行1列2', '行1列3', '行1列1'],
        ['行1列2', '行1列3', '行1列1', '行1列2', '行1列3', '行1列1'],
        ['行1列2', '行1列3', '行1列1', '行1列2', '行1列3', '行1列1']
      ];
      if (result) {
        configData = [];
        for (const item of result) {
          configData[configData.length] = [ item.name, item.idCard, item.areaCode, item.hospital, item.timeSettle, item.costSettle ];
        }
      }
      config.data = configData || configDemo;
      this.config_data3 = {...config};
    },


    // 浙里办使用量
    echartsPie2(data) {
      const myChart = echarts.init(document.getElementById("id_zlb"))
      const posList = [
        'left',
        'right',
        'top',
        'bottom',
        'inside',
        'insideTop',
        'insideLeft',
        'insideRight',
        'insideBottom',
        'insideTopLeft',
        'insideTopRight',
        'insideBottomLeft',
        'insideBottomRight'
      ]
      let app = {}
      app.configParameters = {
        rotate: {
          min: -90,
          max: 90
        },
        align: {
          options: {
            left: 'left',
            center: 'center',
            right: 'right'
          }
        },
        verticalAlign: {
          options: {
            top: 'top',
            middle: 'middle',
            bottom: 'bottom'
          }
        },
        position: {
          options: posList.reduce(function (map, pos) {
            map[pos] = pos;
            return map;
          }, {})
        },
        distance: {
          min: 0,
          max: 100
        }
      };
      app.config = {
        rotate: 90,
        align: 'left',
        verticalAlign: 'middle',
        position: 'insideBottom',
        distance: 15,
        onChange: function () {
          const labelOption = {
            rotate: app.config.rotate,
            align: app.config.align,
            verticalAlign: app.config.verticalAlign,
            position: app.config.position,
            distance: app.config.distance
          };
          myChart.setOption({
            series: [
              {
                label: labelOption
              },
              {
                label: labelOption
              },
              {
                label: labelOption
              },
              {
                label: labelOption
              }
            ]
          });
        }
      };
      const labelOption = {
        show: false,
        position: app.config.position,
        distance: app.config.distance,
        align: app.config.align,
        verticalAlign: app.config.verticalAlign,
        rotate: app.config.rotate,
      };
      const option = {
        // 图表在容器内的位置
        grid: {
          top: '20%',
          right: '0%',
          bottom: '25%',
          left: '13%'
        },
        // 图例
        legend: {
          top: '0%',
          textStyle: {
            color: '#fff'
          },
          data: ['单位', '个人'],
        },
        // 悬浮提示框
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        // X轴
        xAxis: [{
          type: 'category',
          data: ['金华市', '兰溪市', '义乌市', '东阳市', '永康市', '武义市', '浦江市', '磐安市'],
          axisLabel: {  // 标签
            textStyle: {
              color: '#8c8c92',
            },
            interval: 0, //坐标刻度之间的显示间隔，默认就可以了（默认是不重叠）
            rotate: 60   //调整数值改变倾斜的幅度（范围-90到90）
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: '#014C7D'
            }
          },
        }],
        yAxis: [
          {
            type: 'value',
            name: "次",
            min: 0,
            max: 50,
            interval: 10,
            nameTextStyle: {
              color: '#8c8c92',
              fontSize: 11,
              nameLocation: "start",
            },
            axisLabel: {  // 标签
              textStyle: {
                color: '#8c8c92',
              }
            },
            axisLine: {
              lineStyle: {
                color: '#014C7D'
              }
            },
            // 切割线
            splitLine: {
              show: true,
              lineStyle: {
                color: '#014C7D'
              }
            },
          }
        ],
        series: [
          {
            name: '单位',
            type: 'bar',
            label: labelOption,
            emphasis: {
              focus: 'series'
            },
            barWidth: 7,
            data: [31, 26, 27, 41, 32, 28, 25, 29],
            itemStyle: {
              normal: {
                opacity: 1,
                barBorderRadius: [20, 20, 0, 0],
                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                  offset: 0,
                  color: "#08244C" // 0% 处的颜色
                }, {
                  offset: 1,
                  color: "#2A76F2" // 100% 处的颜色
                }], false),
              }
            },
          },
          {
            name: '个人',
            type: 'bar',
            barGap: 0,
            label: labelOption,
            emphasis: {
              focus: 'series'
            },
            data: [26, 23, 29, 39, 30, 27, 23, 26],
            barWidth: 7,
            itemStyle: {
              normal: {
                opacity: 1,
                barBorderRadius: [20, 20, 0, 0],
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: '#54FFFF'
                }, {
                  offset: 1,
                  color: '#06152A'
                }]),
              }
            },
          }
        ]
      }
      option && myChart.setOption(option);
    },
    init() {
      let result = {
        list: [
          {sz02: '2017', sz03: 35, sz04: 29, sz05: 20},
          {sz02: '2018', sz03: 30, sz04: 33, sz05: 12},
          {sz02: '2019', sz03: 42, sz04: 35, sz05: 15},
          {sz02: '2020', sz03: 48, sz04: 39, sz05: 25},
          {sz02: '2021', sz03: 32, sz04: 26, sz05: 17},
        ]
      }
      for (let item of result.list) {
        this.gssz.xData[this.gssz.xData.length] = item.sz02;
        this.gssz.income[this.gssz.income.length] = item.sz03;
        this.gssz.expenditure[this.gssz.expenditure.length] = item.sz04;
        this.gssz.balance[this.gssz.balance.length] = item.sz05;
      }
      console.log(this.gssz)
    },
    // 浙里办使用量
    tableInit_pie() {
      const chart = Highcharts.chart('id_pie', {
        chart: {
          type: 'pie',
          backgroundColor: 'rgba(0,0,0,0)',
          options3d: {
            enabled: true,
            alpha: 65,
            beta: 0
          }
        },
        legend: {
          align: 'right',
          verticalAlign: 'top',
          x: 0,
          y: 100
        },
        title: {
          text: ''
        },
        tooltip: {
          pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
        },
        plotOptions: {
          pie: {
            allowPointSelect: true,
            cursor: 'pointer',
            depth: 15,
            dataLabels: {
              enabled: false,
              format: '{point.name}'
            }
          },
          borderWidth: 0.2,
          offset: 20
        },
        series: [{
          type: 'pie',
          name: '',
          data: [
            ['数据1', 45.0],
            ['数据2', 26.8],
            {
              name: '数据6',
              y: 12.8,
              sliced: true,
              selected: true
            },
            ['数据3', 8.5],
            ['数据4', 6.2],
            ['数据5', 0.7]
          ]
        }]
      });
    },
    // 工伤收支差额
    tableInit_fundPure() {
      const myChart = echarts.init(document.getElementById("id_pureYear"))
      const posList = [
        'left',
        'right',
        'top',
        'bottom',
        'inside',
        'insideTop',
        'insideLeft',
        'insideRight',
        'insideBottom',
        'insideTopLeft',
        'insideTopRight',
        'insideBottomLeft',
        'insideBottomRight'
      ]
      const option = {
        // 图表在容器内的位置
        grid: {
          top: '25%',
          right: '0%',
          bottom: '20%',
          left: '13%'
        },
        // 图例
        legend: {
          top: '7%',
          right: '0%',
          textStyle: {
            color: '#fff'
          },
          data: ['基金收入', '基金支出', '基金结余'],
        },
        // 悬浮提示框
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        // X轴
        xAxis: [{
          type: 'category',
          data: this.gssz.xData,
          axisLabel: {  // 标签
            textStyle: {
              color: '#8c8c92',
            },
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: '#014C7D'
            }
          },
        }],
        yAxis: [
          {
            type: 'value',
            name: "万元",
            min: 0,
            max: 60,
            interval: 20,
            nameTextStyle: {
              color: '#8c8c92',
              fontSize: 11,
              nameLocation: "start",
            },
            axisLabel: {  // 标签
              textStyle: {
                color: '#8c8c92',
              }
            },
            axisLine: {
              lineStyle: {
                color: '#014C7D'
              }
            },
            // 切割线
            splitLine: {
              show: true,
              lineStyle: {
                color: '#014C7D'
              }
            },
          }
        ],
        series: [
          {
            name: '基金收入',
            type: 'bar',
            label: labelOption,
            emphasis: {
              focus: 'series'
            },
            barWidth: 9,
            data: this.gssz.income,
            itemStyle: {
              normal: {
                opacity: 1,
                color: '#3E9DF3'
              }
            },
          },
          {
            name: '基金支出',
            type: 'bar',
            barGap: 0,
            label: labelOption,
            emphasis: {
              focus: 'series'
            },
            data: this.gssz.expenditure,
            barWidth: 9,
            itemStyle: {
              normal: {
                opacity: 1,
                color: '#E5772D'
              }
            },
          },
          {
            name: '基金结余',
            type: 'line',
            itemStyle: {  /*设置折线颜色*/
              normal: {
                color: '#46D3CB'
              }
            },
            data: this.gssz.balance
          }
        ]
      }
      let app = {}
      app.configParameters = {
        rotate: {
          min: -90,
          max: 90
        },
        align: {
          options: {
            left: 'left',
            center: 'center',
            right: 'right'
          }
        },
        verticalAlign: {
          options: {
            top: 'top',
            middle: 'middle',
            bottom: 'bottom'
          }
        },
        position: {
          options: posList.reduce(function (map, pos) {
            map[pos] = pos;
            return map;
          }, {})
        },
        distance: {
          min: 0,
          max: 100
        }
      };
      app.config = {
        rotate: 90,
        align: 'left',
        verticalAlign: 'middle',
        position: 'insideBottom',
        distance: 15,
        onChange: function () {
          const labelOption = {
            rotate: app.config.rotate,
            align: app.config.align,
            verticalAlign: app.config.verticalAlign,
            position: app.config.position,
            distance: app.config.distance
          };
          myChart.setOption({
            series: [
              {
                label: labelOption
              },
              {
                label: labelOption
              },
              {
                label: labelOption
              },
              {
                label: labelOption
              }
            ]
          });
        }
      };
      const labelOption = {
        show: false,
        position: app.config.position,
        distance: app.config.distance,
        align: app.config.align,
        verticalAlign: app.config.verticalAlign,
        rotate: app.config.rotate,
      };
      option && myChart.setOption(option);
    },
    // 支付能力排行
    tableInit_abilityPay() {
      const myChart = echarts.init(document.getElementById("id_abilityPay"))
      const salvProName = ["金华市", "兰溪市", "义乌市", "东阳市", "永康市", "武义县", "浦江县", "磐安县"];
      const salvProValue = [10, 8, 7, 6, 5, 4.5, 4, 3];
      const salvProValue2 = ['10个月', '8个月', '7个月', '6个月', '5个月', '4.5个月', '4个月', '3个月'];
      const salvProMax = [];//背景按最大值
      for (let i = 0; i < salvProValue.length; i++) {
        salvProMax.push(salvProValue[0])
      }
      const option = {
        // backgroundColor: "#003366",
        grid: {
          left: '6%',
          right: '2%',
          bottom: '10%',
          top: '0%',
          containLabel: true
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'none'
          },
          formatter: function (params) {
            return params[0].name + ' : ' + params[0].value
          }
        },
        xAxis: {
          show: false,
          type: 'value'
        },
        yAxis: [{
          type: 'category',
          inverse: true,
          axisLabel: {
            show: true,
            textStyle: {
              color: '#fff'
            },
          },
          splitLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          },
          data: salvProName
        }, {
          type: 'category',
          inverse: true,
          axisTick: 'none',
          axisLine: 'none',
          show: true,
          axisLabel: {
            textStyle: {
              color: '#ffffff',
              fontSize: '12'
            },
          },
          data: salvProValue2
        }],
        series: [{
          name: '值',
          type: 'bar',
          barWidth: 6,
          zlevel: 1,
          itemStyle: {
            normal: {
              barBorderRadius: 30,
              color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                offset: 0,
                color: 'rgb(57,89,255,1)'
              }, {
                offset: 1,
                color: 'rgb(46,200,207,1)'
              }]),
            },
          },
          data: salvProValue
        },
          {
            name: '背景',
            type: 'bar',
            barWidth: 6,
            barGap: '-100%',
            data: salvProMax,
            itemStyle: {
              normal: {
                color: 'rgba(30,43,58,1)',
                barBorderRadius: 30,
              }
            },
          },
        ]
      };
      option && myChart.setOption(option);
    },
    // 基金收支差额
    tableInit_pure() {
      const myChart = echarts.init(document.getElementById("id_fundPure2"))
      const option = {
        grid: {
          top: '30%',
          right: '10%',
          bottom: '9%',
          left: '13%'
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          top: '7%',
          right: '10%',
          textStyle: {
            color: '#fff'
          },
          data: ['基金收入', '基金支出']
        },
        xAxis: [
          {
            type: 'category',
            axisLabel: {  // 标签
              textStyle: {
                color: '#8c8c92',
              }
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#014C7D'
              }
            },
            data: ['7月', '8月', '9月', '10月', '11月', '12月']
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '万元',
            min: 0,
            max: 50,
            interval: 10,
            nameTextStyle: {
              color: '#8c8c92',
              fontSize: 11,
              nameLocation: "start",
            },
            axisLabel: {  // 标签
              textStyle: {
                color: '#8c8c92',
                formatter: '{value} '
              }
            },
            axisLine: {
              lineStyle: {
                color: '#014C7D'
              }
            },
            // 切割线
            splitLine: {
              show: true,
              lineStyle: {
                color: '#014C7D'
              }
            },
          }
        ],
        series: [
          {
            name: '基金收入',
            type: 'bar',
            barWidth: 10,
            itemStyle: {
              normal: {
                label: {
                  show: true, //开启显示
                  position: 'top', //在上方显示
                  textStyle: { //数值样式
                    color: 'white',
                  }
                },
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: '#00F2F8'
                }, {
                  offset: 1,
                  color: '#04253B'
                }]),
              }
            },
            data: yData1
          },
          {
            name: '基金支出',
            type: 'line',
            itemStyle: {  /*设置折线颜色*/
              normal: {
                color: '#EA772B'
              }
            },
            data: yData2
          }
        ]
      };
      option && myChart.setOption(option);
    },
    open() {
      this.$nextTick(() => {
        this.getFundRankIndustry_sub();
        this.getFundRankRegion_sub();
        this.getFundM_sub();
        this.getFundY_sub();
        this.getFundMedical_sub();
        this.getUsageZLB_sub();
        this.getFundSettlement_sub();

        // this.echartsPie2([
        //   {name: '伤残补助金', value: 234},
        //   {name: '医疗费用', value: 345},
        //   {name: '护理费', value: 211},
        //   {name: '其他费用1', value: 123},
        //   {name: '其他费用2', value: 321},
        // ]);
        //this.tableInit_pie();
        //this.tableInit_fundPure();
        //this.tableInit_abilityPay();
        //this.tableInit_pure();
      })
    },
    // 关闭对话框的回调，调用父组件方法
    closeDialog() {
      this.$emit("closeDialog")
    },
  }
}
</script>

<style scoped>
.sub_titleBar {
  background: url("../assets/head_bg2.png") no-repeat;
  overflow: hidden;
  background-size: cover;
  width: 1737px;
  height: 80px;
  margin-top: -13px;
  margin-left: 46px;
}

.sub_title {
  position: absolute;
  left: 47%;
  color: #BDE4FF;
  font-size: 38px;
  font-weight: 600;
  margin-top: 24px;
}

main {
  width: 1737px;
  height: 833px;
  margin-left: 46px;
}

.part1 {
  width: auto;
  height: 28%;;
}

.part2 {
  width: auto;
  height: 36%;
}

.part3 {
  width: auto;
  height: 36%;
}

.insured {
  float: left;
  height: 50%;
  width: 100%;
}

.box_left2 {
  float: left;
  height: 50%;
  width: 100%;
  margin-top: -12px;
}

.data3_table {
  width: 100%;
  height: 50%;
}

.table_title {
  background: url("../assets/subtitle_short.png");
  overflow: hidden;
  background-size: cover;
  text-align: left;
  padding-left: 10%;
  font-size: 1.2rem;
  font-weight: 600;
  color: white;
}

.height_left1 {
  height: 18%;
  line-height: 170%;
}

.height_left2 {
  height: 14%;
  line-height: 170%;
}

.height_left3 {
  height: 15%;
  line-height: 170%;
}

.height_right1 {
  height: 18%;
  line-height: 200%;
}

.height_right2 {
  height: 14%;
  line-height: 200%;
}

.height_right3 {
  height: 15%;
  line-height: 180%;
}

.right_data1 {
  float: left;
  height: 50%;
  width: 100%;
}

.right_data2 {
  float: left;
  height: 50%;
  width: 100%;
}

.right_data3 {
  float: left;
  height: 50%;
  width: 100%;
}

* {
  margin: 0;
  padding: 0;
  font-family: 微软雅黑;
}

body {
  width: 100%;
  height: 100%;
}

.bg {
  background: url("../assets/bg.png") no-repeat;
  height: 100%;
  width: 100%;
  overflow: hidden;
  background-size: cover;
  position: fixed;
  margin-top: -60px;
  margin-left: -8px;
}

.map {
  height: 66%;
  width: 100%;
  margin: 0 auto;
  background: url("../assets/map_bg.png") no-repeat center;
  overflow: hidden;
  background-size: contain;
}

.title {
  display: inline-block;
  float: left;
  margin-top: .5rem;
  margin-left: 38%;
  color: #D9EBFA;
  font-size: 2.6rem;
  font-weight: 600;
}

.datetime {
  display: inline-block;
  float: right;
  width: 13%;
  height: 4%;
  margin-right: 8%;
  margin-top: 1.2rem;
  color: #D9EBFA;
}

.time {
  display: inline-block;
  float: left;
  margin-top: 4%;
  font-size: 1.6rem;
}

.date {
  display: inline-block;
  float: right;
  font-size: .9rem;
}

.week {
  float: right;
}

.data_mid_1 {
  width: 74%;
  height: 9%;
  margin: 0 auto;
}

.data1 {
  float: left;
  height: 100%;
  width: 31%;
  margin: 0 1%;
}

.data1_right {
  float: left;
  color: #fff;
  width: 58%;
  height: 88%;
  padding-top: 5%;
}

.data1_img {
  float: left;
  height: 100%;
  height: 100%;
  width: 40%;
  overflow: hidden !important;
  background-size: cover !important;
  margin-left: 2%;
}

.data1_text1 {
  font-size: .9rem;
  font-weight: 600;
  text-align: left;
  margin-left: 10px;
  color: white;
}

.data1_text2 {
  display: inline-block;
  float: left;
  width: 55%;
  height: 70%;
  margin-left: 10%;
  font-family: LCD2;
  font-size: 1.6rem;
}

.data1_text4 {
  display: inline-block;
  float: left;
  width: 13%;
  height: 70%;
  margin-left: 2%;
  margin-top: 2.5%;
}

.data1_text3 {
  display: inline-block;
  float: left;
  font-size: .8rem;
  margin-top: 5.8%;
  color: #FBD533;
}

.data1_text5 {
  display: inline-block;
  float: left;
  font-size: .8rem;
  margin-top: 15%;
  margin-left: 5%;
  color: #FBD533;
}

.data_mid_2 {
  float: left;
  width: 65%;
  height: 100%;
}

.data2_title {
  background: url("../assets/subtitle_long.png") no-repeat;
  overflow: hidden;
  background-size: cover;
  width: 100%;
  line-height: 180%;
  margin-bottom: 1%;
  margin-top: .5%;
  font-size: 1.4rem;
  font-weight: 600;
  color: #DCF3FF;
}

.data2_table {
  margin-left: 6%;
  width: 94%;
  height: 58%;
}

.data_table {
  margin-left: 3.5%;
  width: 96.5%;
  height: 75%;
}

.data3_table_top {
  width: 100%;
  height: 22%;
}

.data3_table_top_img {
  background: url("../assets/data_left_3.png");
  overflow: hidden;
  background-size: cover;
  height: 90%;
  width: 15%;
  margin-left: 4%;
  float: left;
}

.data3_table_top_text {
  float: left;
  color: white;
  font-size: 1.2rem;
  font-weight: 600;
  margin-top: 4%;
}

.btn_bottom_box {
  height: 60%;
  width: 40%;
  margin: 1.5% auto;
}

.btn_bottom {
  float: left;
  height: 100%;
  width: 23%;
  margin-right: 2%;
}

.btn_bottom :hover {
  color: #F9D494;
}

.btn_bottom_img {
  float: left;
  height: 90%;
  width: 27%;
  overflow: hidden !important;
  background-size: cover !important;
  margin-right: 4%;
}

.btn_bottom_text {
  display: inline-block;
  float: left;
  width: 55%;
  margin: 12% 0;
  color: #ffffff;
  font-size: 1em;
  font-weight: 600;
  font-style: italic;
  text-align: left;
}

.middle {
  height: 100%;
  width: 45%;
  margin: 0 auto;
}

.left {
  float: left;
  height: 620px;
  width: 579px;
}

.mid {
  float: left;
  height: 620px;
  width: 579px;
}

.right {
  float: left;
  height: 620px;
  width: 579px;
}

.bottom {
  float: left;
  height: 230px;
  width: 1737px;
  margin-top: -25px;
}

.water {
  float: left;
  width: 579px;
  height: 230px;
}
</style>
